<template>
  <!-- 其他登录方式 -->
  <div class="login-bd">
    <div class="bd">
      <div class="phone">
        <img src="@/assets/images/login/login-phone.png" alt="" />
        <a href="javascript:;" class="u-btn2 login-btn" @click="changeToPhoneLogin"
          ><div class="u-btn2">手机号登录</div></a
        >
        <a
          href="javascript:;"
          class="u-btn2 register login-btn"
          @click="$Message({ msg: '此功能尚未开发' })"
          ><div class="u-btn2">注册</div></a
        >
      </div>
      <div class="morelogin">
        <ul>
          <li>
            <a href="javascript:;" @click="$Message({ msg: '此功能尚未开发' })"
              ><i class="u-icn4 wechat"></i>微信登录</a
            >
          </li>
          <li>
            <a href="javascript:;" @click="$Message({ msg: '此功能尚未开发' })"
              ><i class="u-icn4 qq"></i>QQ登录</a
            >
          </li>
          <li>
            <a href="javascript:;" @click="$Message({ msg: '此功能尚未开发' })"
              ><i class="u-icn4 weibo"></i>微博登录</a
            >
          </li>
          <li>
            <!-- 请勾选同意《服务条款》、《隐私政策》、《儿童隐私政策》 -->
            <a href="javascript:;" @click="changeToEmailLogin"
              ><i class="u-icn4 email"></i>网易云邮箱登录</a
            >
          </li>
        </ul>
      </div>
    </div>
    <div class="agree">
      <input type="checkbox" name="agree" id="" v-model="isAgree" />
      <label for="agree">同意</label>
      <a href="https://st.music.163.com/official-terms/service" target="_blank">《服务条款》</a
      ><a href="http://st.music.163.com/official-terms/privacy" target="_blank">《隐私政策》</a
      ><a href="https://st.music.163.com/official-terms/children" target="_blank"
        >《儿童隐私政策》</a
      >
    </div>
    <img
      src="@/assets/images/login/QR.png"
      alt=""
      class="qr-cover"
      @click="changeToQRLogin"
    />
  </div>
</template>

<script>
export default {
  data() {
    return {
      // 是否勾选用户协议
      isAgree: true
    }
  },
  methods: {
    changeToPhoneLogin() {
      if (!this.isAgree) {
        this.$Message({ msg: '请勾选同意《服务条款》、《隐私政策》、《儿童隐私政策》' })
      } else {
        this.$parent.loginMethod = 'phone'
      }
    },
    changeToEmailLogin() {
      if (!this.isAgree) {
        this.$Message({ msg: '请勾选同意《服务条款》、《隐私政策》、《儿童隐私政策》' })
      } else {
        this.$parent.loginMethod = 'email'
      }
    },
    changeToQRLogin() {
      if (!this.isAgree) {
        this.$Message({ msg: '请勾选同意《服务条款》、《隐私政策》、《儿童隐私政策》' })
      } else {
        this.$parent.loginMethod = 'QR'
      }
    }
  }
}
</script>

<style lang="less" scoped>
.login-bd {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-content: center;
  margin: 20px 0;
  width: 100%;
  height: 270px;
  .bd {
    display: flex;
    justify-content: center;
    .phone {
      width: 224px;
      padding: 0 35px 3px 40px;
      border-right: 1px dotted #ccc;
      display: flex;
      flex-direction: column;
      justify-content: space-around;
      align-items: center;
      box-sizing: content-box;
      img {
        width: 224px;
        height: 120px;
      }
      a {
        &.register {
          color: #333;
          background-position: right -100px;
          div {
            background-position: 0 -59px;
          }
          &:hover {
            background-position: right -182px;

            div {
              background-position: 0 -141px;
            }
          }
        }
      }
    }
    .morelogin {
      padding: 3px 0 3px 39px;
      margin-top: -15px;
      ul {
        li {
          margin-top: 15px;
          text-align: left;
          a {
            font-size: 12px;
            color: #333;
            line-height: 38px;
            text-align: left;
            .u-icn4 {
              display: inline-block;
              vertical-align: middle;
              margin-right: 14px;
              width: 38px;
              height: 38px;
            }
            .wechat {
              background-position: -150px -670px;
            }
            .qq {
              background-position: -190px -670px;
            }
            .weibo {
              background-position: -231px -670px;
            }
            .email {
              background-position: -271px -670px;
            }
          }
        }
      }
    }
  }
  .agree {
    margin-top: 10px;
    margin-left: 50px;
    text-align: left;
    input {
      vertical-align: middle;
    }
    label {
      margin-left: 2px;
      color: rgba(0, 0, 0, 0.4);
    }
    a {
      color: #0c73c2;
    }
  }
  .qr-cover {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 52px;
    height: 52px;
  }
}
</style>
